<template>
  <px-dialog v-model="visible" title="特气周耗量分析" width="80%" @close="cancel">
    <div class="content">
      <px-radio-group v-model="model" @change="radioChangeHandler">
        <px-radio-button name="全部" label="全部" />
        <px-radio-button name="psi" label="psi" />
        <px-radio-button name="Lbs" label="Lbs" />
      </px-radio-group>
      <div ref="chartRef" class="chart-container" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button type="primary" @click="cancel">关闭</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, toRefs, computed, onMounted } from "vue";
import * as echarts from "echarts";

const emits = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default() {
      return [];
    }
  }
});

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const chartRef = ref(null);

const model = ref("全部");

const radioChangeHandler = val => {
  drawChart(true);
};
onMounted(() => {
  nextTick(() => {
    drawChart();
  });
});

const cancel = () => {
  emits("update:visible", false);
};

const drawChart = (flag = false) => {
  let myChart = echarts.init(chartRef.value);
  let data = props.data.filter(item => {
    if (model.value === "全部") {
      return true;
    } else {
      return item.unit === model.value;
    }
  });
  let xData = [];
  let seriesData = [];
  data.map(item => {
    let valueList = [];
    item.valueList.map(v => {
      xData.push(v.name);
      valueList.push(v.num);
    });
    seriesData.push({
      name: item.itemName,
      type: "line",
      // stack: "Total",
      data: valueList,
      yAxisIndex: model.value === "全部" ? (item.unit === "psi" ? 0 : 1) : 0,
      tooltip: {
        formatter: `{a0}（${item.unit || "--"}）<br /> {b0}: {c0}`
      }
    });
  });
  const yAxis =
    model.value === "全部"
      ? [
          {
            type: "value",
            name: "psi"
          },
          {
            type: "value",
            name: "Lbs"
          }
        ]
      : [
          {
            type: "value",
            name: model.value
          }
        ];

  let option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      data: data.map(v => v.itemName),
      x: "center",
      bottom: 60,
      type: "scroll",
      width: "92%"
    },
    grid: {
      top: 60,
      bottom: 90,
      left: 60,
      right: model.value === "全部" ? 40 : 10,
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          title: "保存为图片"
        }
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [...new Set(xData)]
    },
    yAxis,
    dataZoom: [
      {
        type: "slider",
        orient: "vertical",
        filterMode: "none",
        left: 10,
        start: 0,
        end: 100
      },
      {
        type: "inside",
        orient: "vertical",
        filterMode: "none",
        start: 0,
        end: 100
      }
    ],
    series: seriesData
  };
  nextTick(() => {
    myChart.setOption(option, flag);
  });
};
</script>

<style lang="scss" scoped>
.content {
  // width: 800px;
  // padding-top: 16px;
  height: 550px;
  border: 1px solid #eee;

  .px-radio-group {
    margin: 12px 0 0 12px;
  }
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
